<template>
    <div>
        <cus-modal
            ref="modal"
            :title="form.name  + ' -  关联菜肴'"
            @on-visible-change="onVisibleChange"
            width="800"
            :showOkBtn="false"
            cancelBtnName="关闭"
        >
            <Table border :loading="loading" :columns="columns" :data="data">
                <template slot-scope="{ row,index }" slot="dishUrl">
                    <div style="display:flex;justify-content:center">
                        <div class="table-cell-img">
                            <img :src="row.dishUrl" alt="" class="" border="0" onload="autosize(this,50,50);" @click="$cu.previewImage(row.dishUrl)">
                        </div>
                    </div>
                </template>
            </Table>
            <div style="width: 100%;display: flex;justify-content: flex-end">
                <cus-page :data="pages" class="mt_10" @pageChange="selectDishByFoodApi" :showElevator="false" :showSizer="false"></cus-page>
            </div>
        </cus-modal>
    </div>
</template>

<script>
import { selectDishByFood } from "@/api/business/dishesModule";

export default {
    data() {
        return {
            loading: false,
            form: { name: '', materialId: '' },
            columns: [
                {
                    title: '序号',
                    width: 70,
                    type: 'index',
                    align: 'center'
                },
                {
                    title: '菜肴名称',
                    key: 'dishName',
                    align: 'center',
                },
                {
                    title: '菜肴分类',
                    key: 'dishType',
                    align: 'center',
                },
                {
                    title: '菜肴图片',
                    slot: 'dishUrl',
                    align: 'center',
                }
            ],
            data: [],
            pages: {
                page: 1,
                pageSize: 10,
                pageTotal: 0
            },
        };
    },
    mounted() {
        
    },
    methods: {
        onVisibleChange(v) {
            if (!v) {
                this.form = { name: '', materialId: '' };
                this.data = [];
                this.pages = {
                    page: 1,
                    pageSize: 10,
                    pageTotal: 0
                }
            }
        },
        show() {
            this.$refs["modal"].show = true;
            this.selectDishByFoodApi() // 获取关联列表
        },
        // 获取关联菜肴列表
        selectDishByFoodApi() {
            return new Promise((resolve) => {
                selectDishByFood({
                    current: this.pages.page,
                    size: this.pages.pageSize,
                    materialId: this.form.materialId
                }).then((res) => {
                    if (res.retCode === 2000) {
                        this.data = res.data.records;
                        this.pages.pageTotal = res.data.total;
                        resolve();
                    }
                });
            });
        },
    },
};
</script>

<style scoped lang="less">
.permission {
    height: 300px;
    width: 500px;
    border: 1px solid #dcdee2;
    overflow-y: auto;
    border-radius: 2px;
    padding: 0 0 0 10px;
}
</style>
